<template>
	<view class="coupons">
		<view>

			<view v-if="total!=0">
				<view v-for="(item,index) in list" :key="index" class="sign-coupons">
					<view class="info">
						<image src="/static/img/coupons_red.png" v-if="type==1"></image>
						<image src="/static/img/coupons_gray.png" v-else></image>
						<text>￥{{item.info.discount_money}}</text>
						<text>满{{item.info.satisfy_money}}元可用</text>
					</view>
					<view class="flex flex-left-right flex-full name">
						<view class="flex-column">
							<text class="fs-16 bold">{{item.info.name}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-if="item.info.use_timedata==2">
								{{item.info.use_time_info.start_time.substring(0,10)}}至{{item.info.use_time_info.end_time.substring(0,10)}}</text>
							<text class="fs-12 gray_font" style="margin-top: 20rpx;" v-else>

								{{$fomartDate(item.be_time).substring(0,10)}}之前有效
							</text>
						</view>
						<view class="status">
							<text @click="use(item)" v-if="item.use">立刻使用</text>
							<text v-else style="background: gray;">立刻使用</text>

						</view>
					</view>
				</view>
			</view>
			<view class="flex-j-c flex-column align_center" v-else style="padding-top: 10vh;">
				<image src="/static/img/no_good.png" class="no-bitmap" mode="aspectFit" />
				<text>暂时还没有优惠券哦~</text>
			</view>
		</view>
		<view style="padding-bottom: calc(env(safe-area-inset-bottom) + 98rpx)"></view>
		<view class="my-coupons">
			<view @click="morePage">不使用优惠券</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						name: '未使用',
						id: ''
					},
					{
						name: '已使用',
						id: ''
					},
					{
						name: '已过期',
						id: ''
					},
				],

				page: 1,
				list: [],
				type: 1,
				totalPrice: '',
				total: 0
			}
		},
		methods: {
			use(item) {
				console.log(item);
				uni.setStorageSync('quanInfo', JSON.stringify(item));
				this.$back()
			},

			morePage() {
				uni.removeStorageSync('quanInfo')
				this.$back()
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10,
					type: this.type
				};
				this.$get(this.$api.cMy, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						let time = new Date() - 0;

						data.data.data.map((item) => {
							if (item.info.use_timedata == 2) {
								console.log(new Date(item.info.use_time_info.start_time) - 0 <= time &&
									new Date(
										item.info.use_time_info.end_time) - 0 >= time && this
									.totalPrice - item.info.satisfy_money >=
									0)
								if (new Date(item.info.use_time_info.start_time) - 0 <= time && new Date(
										item.info.use_time_info.end_time) - 0 >= time && this.totalPrice -item.info.satisfy_money>=0
									) {
									item.use = true;
								} else {
									item.use = false;
								}
							} else {
								console.log(item.be_time)
								if (item.be_time * 1000 >= time && this.totalPrice - item.info
									.satisfy_money >= 0
								) {
									item.use = true;
								} else {
									item.use = false;
								}
							}

							return item
						})
						console.log(data.data.data);
						this.list = this.list.concat(data.data.data);
						this.total = data.data.total;
					}
				})
			}
		},
		onLoad(e) {
			this.totalPrice = e.totalPrice;
			this.getList()
		},
		onReachBottom() {
			// if (this.total == this.list.length) {
			// 	return
			// }
			this.page++;
			this.getList()
		}
	}
</script>

<style lang="scss" scoped>
	.coupons {
		.tabs {
			background: white;
			padding: 0 30rpx;
			height: 80rpx;
			position: relative;

			.sign {
				display: flex;
				justify-content: space-between;
				line-height: 80rpx;
			}
		}

		.move-border {
			top: 72rpx;
			position: absolute;
			width: 40rpx;
			background: #FF3333;
			height: 4px;
			transition: 1s;
			border-radius: 3rpx;

		}

		.no-bitmap {
			width: 377rpx;
		}

		.my-coupons {

			position: fixed;

			z-index: 9;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: white;
			height: 98rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			view {
				width: 690rpx;
				background: #FF3333;
				border-radius: 35rpx;
				color: white;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
			}
		}
	}

	.coupons .sign-coupons {
		margin: 30rpx;
		height: 200rpx;
		background-color: white;
		border-radius: 10rpx 4rpx 4rpx 4rpx;
		display: flex;

		.info {
			width: 204rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 204rpx;
				height: 200rpx;
				position: absolute;
			}

			text {
				position: relative;
				z-index: 4;
				font-size: 40rpx;
				color: white;

				&:last-child {
					font-size: 24rpx;
					margin-top: 10rpx;
				}
			}
		}

		.name {
			padding: 0 30rpx;
		}

		.status {
			text {
				display: inline-block;
				width: 120rpx;
				height: 40rpx;
				text-align: center;
				line-height: 40rpx;
				color: white;
				border-radius: 20rpx;
				background: linear-gradient(to left, #FF7A7A, #FF3333);
				font-size: 22rpx;
			}

			.no-use {
				background: #999;
			}
		}
	}
</style>
